Architektura wtyczek z JavaScript Module Federation: Budowanie dynamicznego systemu wtyczek

W dzisiejszym złożonym świecie tworzenia aplikacji internetowych, budowanie modułowych, skalowalnych i łatwych w utrzymaniu aplikacji jest kluczowe. Jedną z potężnych technik osiągnięcia tego celu jest architektura wtyczek, w której funkcjonalność jest podzielona na niezależne, dynamicznie ładowane moduły. JavaScript Module Federation, funkcja Webpack 5, dostarcza solidny mechanizm do implementacji takich architektur. Ten artykuł zagłębia się w zawiłości wykorzystania Module Federation do budowy dynamicznego systemu wtyczek.

Czym jest Module Federation?

Module Federation pozwala aplikacjom JavaScript na dynamiczne współdzielenie kodu w czasie rzeczywistym. Oznacza to, że moduł (fragment kodu) z jednej aplikacji może być bezpośrednio używany przez inną aplikację, bez potrzeby ponownej kompilacji czy wdrożenia. Osiąga się to poprzez udostępnianie i konsumowanie modułów między różnymi kompilacjami, a nawet różnymi wdrożeniami.

Tradycyjne metody współdzielenia kodu, takie jak pakiety npm, wymagają ponownej kompilacji i wdrożenia aplikacji konsumujących za każdym razem, gdy aktualizowana jest współdzielona zależność. Module Federation eliminuje ten narzut, co czyni go idealnym rozwiązaniem w scenariuszach, gdzie wymagane są częste aktualizacje i niezależne wdrożenia.

Dlaczego używać Module Federation do architektur wtyczek?

Module Federation oferuje kilka zalet podczas budowania architektur wtyczek:

• Dynamiczne ładowanie modułów: Wtyczki mogą być ładowane i usuwane w czasie rzeczywistym, co pozwala aplikacjom dostosowywać się do zmieniających się wymagań bez konieczności pełnego ponownego wdrożenia.
• Dekompozycja: Wtyczki są rozwijane i wdrażane niezależnie, co zmniejsza zależności między różnymi częściami aplikacji.
• Skalowalność: Aplikację można łatwo rozszerzać o nowe wtyczki bez wpływu na istniejącą funkcjonalność.
• Utrzymywalność: Wtyczki mogą być aktualizowane i utrzymywane niezależnie, co zmniejsza ryzyko wprowadzenia błędów do głównej aplikacji.
• Współużytkowanie kodu: Wtyczki mogą być ponownie wykorzystywane w wielu aplikacjach, co promuje spójność i zmniejsza wysiłek programistyczny.
• Wersjonowanie i wycofywanie zmian: Możesz zarządzać różnymi wersjami wtyczek i w razie potrzeby łatwo cofać zmiany do poprzednich wersji.

Podstawowe koncepcje: Kontener hosta i zdalny

Module Federation opiera się na dwóch kluczowych koncepcjach:

• Kontener hosta (Host): Główna aplikacja, która konsumuje zdalne moduły (wtyczki).
• Kontener zdalny (Remote): Aplikacja, która udostępnia moduły (wtyczki) do konsumpcji przez hosta.

Kontener hosta dynamicznie pobiera plik wejściowy (remote entry) ze zdalnego kontenera, który zawiera manifest udostępnionych modułów. Host może następnie uzyskać dostęp do tych modułów i używać ich tak, jakby były częścią jego własnej bazy kodu.

Implementacja dynamicznego systemu wtyczek z Module Federation: Przewodnik krok po kroku

Przejdźmy przez proces budowania prostego systemu wtyczek przy użyciu Module Federation. Stworzymy aplikację hosta i zdalną aplikację wtyczki.

1. Konfiguracja aplikacji hosta (kontenera hosta)

Najpierw utwórz nowy katalog projektu i zainicjuj nowy projekt npm:

            mkdir host-app
cd host-app
npm init -y
            

              
                Copy
              
            
          

Zainstaluj Webpack i jego zależności:

            npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev
            

              
                Copy
              
            
          

Utwórz plik `webpack.config.js` w katalogu `host-app` z następującą konfiguracją:

            const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');

module.exports = {
  mode: 'development',
  devtool: 'source-map',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  devServer: {
    port: 3000,
    hot: true,
    static: {
      directory: path.join(__dirname, 'dist'),
    },
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
    ],
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'Host',
      remotes: {
        'plugin': 'Plugin@http://localhost:3001/remoteEntry.js',
      },
      shared: ['react', 'react-dom'],
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
};

            

              
                Copy
              
            
          

Wyjaśnienie:

• `name`: Nazwa aplikacji hosta.
• `remotes`: Definiuje zdalne kontenery, które host będzie konsumował. W tym przypadku konsumuje zdalny kontener o nazwie `plugin` z `http://localhost:3001/remoteEntry.js`. Składnia `Plugin@` oznacza, że `name` w ModuleFederationPlugin zdalnego kontenera to 'Plugin'.
• `shared`: Wymienia zależności, które są współdzielone między hostem a zdalnymi kontenerami. Zapobiega to ładowaniu zduplikowanych kopii tych zależności. Użycie `shared` jest kluczowe dla uniknięcia błędów i zapewnienia prawidłowego działania wtyczki.

Utwórz katalog `src` i dodaj plik `index.js` z następującą zawartością:

            import React, { Suspense } from 'react';
import ReactDOM from 'react-dom/client';

const PluginComponent = React.lazy(() => import('plugin/PluginComponent'));

const App = () => {
  return (
    <div>
      <h1>Host Application</h1>
      <Suspense fallback={<div>Loading Plugin...</div>}>
        <PluginComponent />
      </Suspense>
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

            

              
                Copy
              
            
          

Wyjaśnienie:

• Używamy `React.lazy` do dynamicznego importowania `PluginComponent` ze zdalnego `plugin`. Jest to kluczowe dla leniwego ładowania wtyczki i unikania opóźnień przy początkowym ładowaniu.
• Komponent `Suspense` jest używany do obsługi stanu ładowania podczas pobierania wtyczki.

Utwórz katalog `public` i dodaj plik `index.html` z następującą zawartością:

            <!DOCTYPE html>
<html>
<head>
  <title>Host Application</title>
</head>
<body>
  <div id="root"></div>
  <script src="./bundle.js"></script>
</body>
</html>
            

              
                Copy
              
            
          

Dodaj plik konfiguracyjny Babel `.babelrc`:

            {
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
            

              
                Copy
              
            
          

Zaktualizuj swój plik `package.json` o skrypt startowy:

            {
  "name": "host-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.23.9",
    "@babel/preset-env": "^7.23.9",
    "@babel/preset-react": "^7.23.3",
    "babel-loader": "^9.1.3",
    "html-webpack-plugin": "^5.6.0",
    "webpack": "^5.90.3",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}
            

              
                Copy
              
            
          

2. Konfiguracja aplikacji zdalnej (kontenera wtyczki)

Utwórz nowy katalog projektu dla wtyczki:

            mkdir plugin-app
cd plugin-app
npm init -y
            

              
                Copy
              
            
          

Zainstaluj Webpack i jego zależności:

            npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev
            

              
                Copy
              
            
          

Utwórz plik `webpack.config.js` w katalogu `plugin-app` z następującą konfiguracją:

            const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');

module.exports = {
  mode: 'development',
  devtool: 'source-map',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  devServer: {
    port: 3001,
    hot: true,
    static: {
      directory: path.join(__dirname, 'dist'),
    },
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
    ],
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'Plugin',
      filename: 'remoteEntry.js',
      exposes: {
        './PluginComponent': './src/PluginComponent',
      },
      shared: ['react', 'react-dom'],
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
};

            

              
                Copy
              
            
          

Wyjaśnienie:

• `name`: Nazwa zdalnego kontenera (wtyczki). To **musi** być zgodna z nazwą użytą w konfiguracji `remotes` hosta.
• `filename`: Nazwa pliku wejściowego zdalnego kontenera, który host będzie pobierał.
• `exposes`: Definiuje moduły, które są udostępniane przez zdalny kontener. W tym przypadku udostępniamy moduł `PluginComponent`. Klucz './PluginComponent' jest używany w instrukcji importu hosta (np. `import('plugin/PluginComponent')`).
• `shared`: Podobnie jak w przypadku hosta, wymienia współdzielone zależności. Jest kluczowe, aby współdzielone zależności i ich wersje były kompatybilne między hostem a zdalnym kontenerem.

Utwórz katalog `src` i dodaj plik `PluginComponent.jsx` z następującą zawartością:

            import React from 'react';

const PluginComponent = () => {
  return (
    <div style={{border: '1px solid blue', padding: '10px'}}>
      <h2>Plugin Component</h2>
      <p>This is a dynamically loaded plugin!</p>
    </div>
  );
};

export default PluginComponent;

            

              
                Copy
              
            
          

Utwórz plik `index.js` w katalogu `src`, aby wyeksportować PluginComponent:

            import PluginComponent from './PluginComponent';

export default PluginComponent;
            

              
                Copy
              
            
          

Utwórz katalog `public` i dodaj plik `index.html` z następującą zawartością:

            <!DOCTYPE html>
<html>
<head>
  <title>Plugin Application</title>
</head>
<body>
  <div id="root"></div>
  <script src="./bundle.js"></script>
</body>
</html>
            

              
                Copy
              
            
          

Dodaj plik konfiguracyjny Babel `.babelrc`:

            {
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
            

              
                Copy
              
            
          

Zaktualizuj swój plik `package.json` o skrypt startowy:

            {
  "name": "plugin-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.23.9",
    "@babel/preset-env": "^7.23.9",
    "@babel/preset-react": "^7.23.3",
    "babel-loader": "^9.1.3",
    "html-webpack-plugin": "^5.6.0",
    "webpack": "^5.90.3",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}
            

              
                Copy
              
            
          

3. Uruchamianie aplikacji

Uruchom zarówno aplikację hosta, jak i wtyczki, wykonując polecenie `npm start` w ich odpowiednich katalogach.

Przejdź do `http://localhost:3000` w przeglądarce. Powinieneś zobaczyć aplikację hosta z dynamicznie załadowanym komponentem wtyczki.

Zaawansowane funkcje i zagadnienia

Wersjonowanie i wycofywanie zmian

Module Federation wspiera wersjonowanie, pozwalając na zarządzanie różnymi wersjami wtyczek. Możesz określić ograniczenia wersji w konfiguracji `remotes` hosta. Na przykład:

            remotes: {
  'plugin': 'Plugin@http://localhost:3001/remoteEntry.js@1.0.0',
}
            

              
                Copy
              
            
          

Informuje to hosta, aby używał wersji 1.0.0 wtyczki. Jeśli dostępna jest nowsza wersja, host będzie kontynuował używanie określonej wersji, dopóki nie zostanie ona jawnie zaktualizowana. Implementacja solidnego wersjonowania jest kluczowa dla zapobiegania zmianom powodującym błędy i zapewnienia stabilności aplikacji.

Kwestie bezpieczeństwa

Podczas korzystania z Module Federation bezpieczeństwo jest najważniejsze. Weź pod uwagę następujące kwestie:

• Uwierzytelnianie i autoryzacja: Zaimplementuj odpowiednie mechanizmy uwierzytelniania i autoryzacji, aby zapewnić, że tylko upoważnieni użytkownicy mogą uzyskiwać dostęp do wtyczek i z nich korzystać.
• Integralność kodu: Weryfikuj integralność zdalnych modułów, aby zapobiec wstrzykiwaniu złośliwego kodu do aplikacji. Rozważ użycie Content Security Policy (CSP), aby ograniczyć źródła, z których aplikacja może ładować zasoby.
• Zarządzanie zależnościami: Starannie zarządzaj zależnościami zarówno hosta, jak i zdalnych kontenerów, aby uniknąć podatności. Regularnie aktualizuj zależności do najnowszych wersji.
• Walidacja danych wejściowych: Waliduj wszystkie dane otrzymane ze zdalnych modułów, aby zapobiec atakom typu injection.
• CORS (Cross-Origin Resource Sharing): Skonfiguruj poprawnie CORS, aby umożliwić aplikacji hosta dostęp do pliku wejściowego zdalnego kontenera z aplikacji wtyczki.

Odkrywanie i zarządzanie wtyczkami

W przypadku bardziej złożonych systemów wtyczek może być potrzebny mechanizm do odkrywania i zarządzania wtyczkami. Można to osiągnąć za pomocą rejestru wtyczek lub usługi odkrywania. Centralny rejestr może przechowywać informacje o dostępnych wtyczkach, w tym ich lokalizację, wersję i zależności. Aplikacja hosta może następnie odpytywać rejestr, aby znaleźć i załadować odpowiednie wtyczki.

Rozważ następujące podejścia:

• Scentralizowana konfiguracja: Przechowuj adresy URL wtyczek w centralnym pliku konfiguracyjnym (np. pliku JSON), który aplikacja hosta odczytuje w czasie rzeczywistym. Pozwala to na łatwe dodawanie, usuwanie lub aktualizowanie wtyczek bez ponownego wdrażania aplikacji hosta.
• Odkrywanie oparte na API: Utwórz punkt końcowy API, który zwraca listę dostępnych wtyczek. Aplikacja hosta może następnie pobrać tę listę i dynamicznie załadować wtyczki.
• Architektura sterowana zdarzeniami: Użyj szyny zdarzeń (event bus) lub kolejki komunikatów, aby powiadamiać aplikację hosta o dostępności nowych wtyczek. Pozwala to na asynchroniczne odkrywanie i ładowanie wtyczek.

Dynamiczna konfiguracja i aktywacja wtyczek

Umożliwienie użytkownikom dynamicznej konfiguracji i aktywacji wtyczek to potężna funkcja. Wymaga to mechanizmu do przechowywania i zarządzania konfiguracjami wtyczek. Możesz użyć bazy danych, pliku konfiguracyjnego lub usługi konfiguracyjnej w chmurze do przechowywania ustawień wtyczek. Aplikacja hosta może następnie odczytać te ustawienia w czasie rzeczywistym i aktywować odpowiednie wtyczki. Rozważ udostępnienie interfejsu użytkownika do zarządzania konfiguracjami wtyczek.

Obsługa operacji asynchronicznych i błędów

Podczas pracy z dynamicznie ładowanymi wtyczkami kluczowe jest eleganckie obsługiwanie operacji asynchronicznych i błędów. Użyj `async/await` lub obietnic (Promises) do zarządzania kodem asynchronicznym. Zaimplementuj odpowiednią obsługę błędów, aby przechwytywać i rejestrować wszelkie błędy występujące podczas ładowania lub wykonywania wtyczki. Dostarczaj użytkownikowi informacyjnych komunikatów o błędach. Rozważ użycie scentralizowanej usługi rejestrowania błędów do śledzenia błędów we wszystkich wtyczkach.

Podział kodu i optymalizacja wydajności

Aby zoptymalizować wydajność, użyj podziału kodu (code splitting), aby podzielić aplikację i wtyczki na mniejsze części. Pozwala to przeglądarce pobierać tylko ten kod, który jest potrzebny dla danej strony lub funkcji. Webpack zapewnia wbudowane wsparcie dla podziału kodu. Rozważ użycie leniwego ładowania (lazy loading) do ładowania wtyczek tylko wtedy, gdy są potrzebne. Minifikuj i kompresuj kod, aby zmniejszyć rozmiar pliku.

Testowanie i ciągła integracja

Dokładnie przetestuj swój system wtyczek, aby upewnić się, że działa poprawnie. Pisz testy jednostkowe, integracyjne i testy end-to-end. Użyj systemu ciągłej integracji (CI), aby automatycznie uruchamiać testy przy każdej zmianie kodu. Zaimplementuj potok ciągłego dostarczania (CD), aby zautomatyzować wdrażanie aplikacji i wtyczek.

Przykłady z życia wzięte i przypadki użycia

Module Federation jest używane w różnych rzeczywistych aplikacjach, w tym:

• Platformy e-commerce: Dynamiczne ładowanie rekomendacji produktów, bramek płatniczych i dostawców usług wysyłkowych. Na przykład globalna platforma e-commerce mogłaby użyć Module Federation do integracji różnych dostawców płatności w zależności od lokalizacji klienta. W Ameryce Północnej mogłaby ładować wtyczkę dla Stripe, podczas gdy w Europie mogłaby ładować wtyczkę dla PayPal lub Klarna.
• Systemy zarządzania treścią (CMS): Umożliwianie użytkownikom instalowania i aktywowania wtyczek w celu rozszerzenia funkcjonalności CMS. CMS mógłby pozwalać użytkownikom na instalowanie wtyczek do optymalizacji SEO, integracji z mediami społecznościowymi lub analityki treści.
• Pulpity nawigacyjne i platformy analityczne: Dynamiczne ładowanie różnych widżetów i wizualizacji. Globalna platforma analityczna mogłaby ładować wtyczki dla różnych źródeł danych, takich jak Google Analytics, Adobe Analytics czy Salesforce.
• Architektury mikrofrontendowe: Budowanie dużych aplikacji internetowych jako zbioru niezależnie wdrażalnych mikrofrontendów. Duże przedsiębiorstwo mogłoby użyć Module Federation do zbudowania swojej aplikacji internetowej jako zbioru mikrofrontendów, z których każdy odpowiada za określoną funkcję biznesową, taką jak zarządzanie kontem, katalog produktów czy przetwarzanie zamówień.
• Systemy projektowe (Design Systems): Współdzielenie komponentów interfejsu użytkownika i tokenów projektowych między wieloma aplikacjami. Globalna organizacja z wieloma markami mogłaby użyć Module Federation do współdzielenia wspólnego systemu projektowego we wszystkich swoich aplikacjach, zapewniając spójność i zmniejszając wysiłek programistyczny.

Najlepsze praktyki budowania dynamicznych systemów wtyczek z Module Federation

Oto kilka najlepszych praktyk, o których należy pamiętać podczas budowania dynamicznych systemów wtyczek z Module Federation:

• Utrzymuj wtyczki małe i skoncentrowane: Każda wtyczka powinna być odpowiedzialna za określoną funkcjonalność. Ułatwia to utrzymanie i aktualizację wtyczek.
• Definiuj jasne interfejsy wtyczek: Zdefiniuj jasne interfejsy określające, w jaki sposób wtyczki oddziałują z aplikacją hosta. Zapewnia to kompatybilność wtyczek z hostem i zapobiega zmianom powodującym błędy.
• Używaj wersjonowania semantycznego: Używaj wersjonowania semantycznego do zarządzania wersjami swoich wtyczek. Ułatwia to śledzenie zmian i zapewnienie kompatybilności.
• Dostarczaj dokumentację: Dostarczaj jasną i zwięzłą dokumentację dla swoich wtyczek. Pomaga to użytkownikom zrozumieć, jak instalować, konfigurować i używać wtyczek.
• Implementuj najlepsze praktyki bezpieczeństwa: Stosuj najlepsze praktyki bezpieczeństwa, aby chronić swoją aplikację i wtyczki przed podatnościami.
• Monitoruj wydajność wtyczek: Monitoruj wydajność swoich wtyczek, aby zidentyfikować ewentualne wąskie gardła. Optymalizuj kod, aby poprawić wydajność.
• Automatyzuj wdrażanie: Zautomatyzuj wdrażanie swojej aplikacji i wtyczek. Zmniejsza to ryzyko błędów i zapewnia szybkie wdrażanie aktualizacji.
• Używaj spójnego stylu kodowania: Wymuszaj spójny styl kodowania we wszystkich wtyczkach. Ułatwia to czytanie i utrzymanie kodu.
• Pisz testy jednostkowe: Pisz testy jednostkowe dla swoich wtyczek, aby upewnić się, że działają poprawnie.
• Używaj lintera: Używaj lintera do automatycznego sprawdzania kodu pod kątem błędów.

Podsumowanie

JavaScript Module Federation dostarcza potężny i elastyczny mechanizm do budowania dynamicznych systemów wtyczek. Wykorzystując Module Federation, można tworzyć modułowe, skalowalne i łatwe w utrzymaniu aplikacje, które mogą dostosowywać się do zmieniających się wymagań. Postępując zgodnie z najlepszymi praktykami opisanymi w tym artykule, można budować solidne i bezpieczne systemy wtyczek, które spełniają potrzeby Twojej organizacji.

Technologia ta jest szczególnie cenna w kontekstach międzynarodowych, umożliwiając firmom dostosowywanie swoich ofert oprogramowania do konkretnych regionów lub segmentów klientów bez wdrażania całkowicie oddzielnych aplikacji. Od integracji lokalnych bramek płatniczych po dostarczanie treści specyficznych dla regionu, Module Federation ułatwia bardziej spersonalizowane i efektywne doświadczenie użytkownika na całym świecie.